test(ui): add tests for mobile menu default closed state by howwohmm · Pull Request #2195 · npmx-dev/npmx.dev

howwohmm · 2026-03-22T11:37:59Z

🔗 Linked issue

🧭 Context

The mobile menu had no tests verifying its default state or basic open/close behavior.

📚 Description

Adds a test suite for MobileMenu.client.vue covering:

Closed by default — dialog element is not in DOM when open is false
Opens on request — dialog with role="dialog" and aria-modal="true" appears when open is true
Closes on prop change — dialog removed when open goes from true to false
Backdrop click — emits update:open with false
Close button click — emits update:open with false

Mocks useConnector, useAtproto, and useFocusTrap to isolate the menu logic. Follows existing patterns from HeaderConnectorModal.spec.ts and Tooltip.spec.ts (Teleport + cleanup).

What it doesn't change

No changes to the component itself
No changes to existing tests

…vior Covers issue requirements: - Menu is closed by default (dialog not in DOM) - Opens when prop is set to true - Closes when prop changes back to false - Emits update:open on backdrop click - Emits update:open on close button click Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel · 2026-03-22T11:38:05Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 0:00am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 0:00am
npmx-lunaria	Ignored		Mar 22, 2026 0:00am

coderabbitai · 2026-03-22T11:44:26Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b13b18e3-5b7b-4066-9dfe-a91f5977667f

📥 Commits

Reviewing files that changed from the base of the PR and between 87dad03 and dd44bf8.

📒 Files selected for processing (1)

test/nuxt/components/Header/MobileMenu.spec.ts

✅ Files skipped from review due to trivial changes (1)

test/nuxt/components/Header/MobileMenu.spec.ts

📝 Walkthrough

Walkthrough

A new Vitest test suite for the Nuxt HeaderMobileMenu component was added at test/nuxt/components/Header/MobileMenu.spec.ts. The suite mocks Nuxt composables useConnector and useAtproto, stubs useFocusTrap, and provides an async mountMenu(open) helper that mounts HeaderMobileMenu with an open prop and sample links. Tests assert: no dialog when open is false; dialog appears with aria-modal="true" when open is true; dialog is removed after changing open from true to false; clicking the backdrop emits update:open with [false]; clicking the close button emits update:open with [false]. Lines changed: +118/-0.

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the addition of a test suite for MobileMenu.client.vue with specific test cases covering default closed state, opening on request, closing on prop change, and user interaction events.
Linked Issues check	✅ Passed	The pull request successfully addresses all requirements from issue `#1505`: verifies default closed state, tests opening with proper accessibility attributes, confirms closing on prop change, and validates user interactions emit correct events.
Out of Scope Changes check	✅ Passed	The pull request contains only additions to the test file (MobileMenu.spec.ts) with no modifications to component code or existing tests, remaining entirely within scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 3

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 24804db7-68df-4724-9496-6879bbe8aa62

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 400ad78.

📒 Files selected for processing (1)

test/nuxt/components/Header/MobileMenu.spec.ts

test/nuxt/components/Header/MobileMenu.spec.ts

The Nuxt auto-generated name for Header/MobileMenu.client.vue is HeaderMobileMenu, not MobileMenuClient. Also removes unused `ref` import. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

test/nuxt/components/Header/MobileMenu.spec.ts (1)
88-89: Consider a more type-safe pattern for array access.

Lines 89 and 105 use the non-null assertion operator ! to access wrapper.emitted('update:open')![0]. Whilst the preceding .toBeTruthy() check ensures the array exists, it doesn't explicitly verify that index [0] exists.
♻️ Suggested refactor for stricter type safety

For lines 88-89:
-      expect(wrapper.emitted('update:open')).toBeTruthy()
-      expect(wrapper.emitted('update:open')![0]).toEqual([false])
+      const emitted = wrapper.emitted('update:open')
+      expect(emitted).toBeTruthy()
+      expect(emitted?.[0]).toEqual([false])
For lines 104-105:
-      expect(wrapper.emitted('update:open')).toBeTruthy()
-      expect(wrapper.emitted('update:open')![0]).toEqual([false])
+      const emitted = wrapper.emitted('update:open')
+      expect(emitted).toBeTruthy()
+      expect(emitted?.[0]).toEqual([false])
As per coding guidelines, strictly type-safe code should check when accessing an array value by index.

Also applies to: 104-105

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1fe96943-99c4-4330-9b64-7f0e9f132fb1

📥 Commits

Reviewing files that changed from the base of the PR and between 400ad78 and 87dad03.

📒 Files selected for processing (1)

test/nuxt/components/Header/MobileMenu.spec.ts

test/nuxt/components/Header/MobileMenu.spec.ts

Switch from dynamic `await import('#components')` to static top-level import to match the pattern used by HeaderConnectorModal.spec.ts. Add required `type: 'link'` to NavigationLink test data. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

codecov · 2026-03-22T14:46:31Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

vercel bot deployed to Preview – npmx.dev March 22, 2026 11:40 View deployment

coderabbitai bot reviewed Mar 22, 2026

View reviewed changes

test/nuxt/components/Header/MobileMenu.spec.ts Outdated Show resolved Hide resolved

test/nuxt/components/Header/MobileMenu.spec.ts Show resolved Hide resolved

test/nuxt/components/Header/MobileMenu.spec.ts Outdated Show resolved Hide resolved

howwohmm and others added 2 commits March 22, 2026 17:19

fix(test): correct component name and remove unused import

a92bbc0

The Nuxt auto-generated name for Header/MobileMenu.client.vue is HeaderMobileMenu, not MobileMenuClient. Also removes unused `ref` import. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

[autofix.ci] apply automated fixes

87dad03

vercel bot deployed to Preview – npmx.dev March 22, 2026 11:52 View deployment

coderabbitai bot reviewed Mar 22, 2026

View reviewed changes

test/nuxt/components/Header/MobileMenu.spec.ts Outdated Show resolved Hide resolved

howwohmm and others added 2 commits March 22, 2026 17:27

[autofix.ci] apply automated fixes

dd44bf8

vercel bot deployed to Preview – npmx.dev March 22, 2026 12:00 View deployment

ghostdevv approved these changes Mar 23, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Mar 23, 2026

Merged via the queue into npmx-dev:main with commit 6cb62c6 Mar 23, 2026
19 of 20 checks passed

github-actions bot mentioned this pull request Mar 23, 2026

chore: release v0.5.0 #2096

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(ui): add tests for mobile menu default closed state#2195

test(ui): add tests for mobile menu default closed state#2195
ghostdevv merged 5 commits intonpmx-dev:mainfrom
howwohmm:test/mobile-menu-default-state

howwohmm commented Mar 22, 2026

Uh oh!

vercel bot commented Mar 22, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 22, 2026 •

edited

Loading

Walkthrough

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

codecov bot commented Mar 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

howwohmm commented Mar 22, 2026

🔗 Linked issue

🧭 Context

📚 Description

What it doesn't change

Uh oh!

vercel bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov bot commented Mar 22, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 22, 2026 •

edited

Loading

coderabbitai bot commented Mar 22, 2026 •

edited

Loading